<template>
	<view class="container">
		<view class="header">
			<dropDownMenu v-if="show" class="downMenu" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></dropDownMenu>
			<view class="total">数量：{{ total }}</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="box" v-for="item in list" :key="item.id" @click="goDetail(item)">
				<view class="name">
					{{ item.customer_name }}
				</view>
				<view class="time">{{ item.start_date }} 至 {{ item.end_date }}</view>
				<view class="bot">
					<view class="address">
						{{ item.room_address }}
					</view>
					<view class="num"></view>
				</view>
				<block v-for="itm in dictList" :key="itm.id">
					<view class="status" :class="'status' + item.rent_status" v-if="item.rent_status == itm.item_code">
						{{ itm.item_name }}
					</view>
				</block>
			</view>
			<uni-pagination v-if="total > FormData.perpage" :total="total" :pageSize="FormData.perpage" :value="FormData.page" @change="changePage" />
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无数据</view>
		</view>
		<keyWord :words="FormData.keyword" @onChange="setKeyWord" />
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			FormData: {
				group_id: '',
				room_type: '',
				rent_status: '',
				keyword: '',
				page: 1,
				perpage: 10
			},
			total: 0,
			titleArr: ['分组', '类别', '状态', ''],
			dropArr: [
				[],
				[
					{
						text: '全部',
						value: ''
					},
					{
						text: '整套',
						value: '1'
					},
					{
						text: '合租',
						value: '2'
					},
					{
						text: '整栋',
						value: '3'
					}
				],
				[]
			],
			dictList: [],
			show: false,
			list: []
		};
	},
	onLoad() {
		this.show = false;
		this.getGroup();
	},
	onShow() {
		this.getRentList();
	},
	onPullDownRefresh() {
		this.FormData.page = 1;
		this.getRentList();
	},
	methods: {
		finishClick(resultData) {
			this.FormData.group_id = resultData[0];
			this.FormData.room_type = resultData[1];
			this.FormData.room_status = resultData[2];
			this.FormData.page = 1;
			this.getRentList();
		},
		setKeyWord(e) {
			this.FormData.keyword = e;
			this.getRentList();
		},
		changePage(e) {
			this.FormData.page = e.current;
			this.getRentList();
		},
		goDetail(item) {
			if (item.rent_status == 0) {
				uni.navigateTo({
					url: '/pages/details/book?sn=' + item.rent_sn
				});
			} else {
				uni.navigateTo({
					url: '/pages/details/rent?sn=' + item.rent_sn
				});
			}
		},
		getRentList() {
			uni.showLoading({
				title: '加载中...'
			});
			const queryData = Object.assign({}, this.FormData);
			if (queryData.group_id == '') {
				delete queryData.group_id;
			}
			if (queryData.room_type == '') {
				delete queryData.room_type;
			}
			if (queryData.rent_status == '') {
				delete queryData.rent_status;
			}
			if (queryData.keyword == '') {
				delete queryData.keyword;
			}
			api.rentList(queryData).then((res) => {
				this.list = res.data.items;
				this.total = res.data.total;
				uni.hideLoading();
				uni.stopPullDownRefresh();
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				let list = data.data;
				let arr = [];
				for (let i = 0; i < list.length; i++) {
					let base = {
						text: list[i].group_name,
						value: list[i].id
					};
					arr.push(base);
				}
				let all = {
					text: '全部',
					value: ''
				};
				arr.unshift(all);
				this.dropArr[0] = arr;
				this.getDict();
			});
		},
		getDict() {
			api.getDict('rent_status').then((data) => {
				let list = data.data;
				this.dictList = data.data;
				let arr = [];
				for (let i = 0; i < list.length; i++) {
					let base = {
						text: list[i].item_name,
						value: list[i].item_code
					};
					arr.push(base);
				}
				let all = {
					text: '全部',
					value: ''
				};
				arr.unshift(all);
				this.dropArr[2] = arr;
				this.show = true;
			});
		}
	}
};
</script>

<style lang="scss">
.list {
	padding: 20rpx;
	.box {
		margin-bottom: 20rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		.name {
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		.time {
			font-size: 26rpx;
			color: $uni-secondary-color;
			margin-bottom: 20rpx;
		}
		.bot {
			display: flex;
			justify-content: space-between;
			.address {
				font-size: 26rpx;
			}
		}
		.status {
			position: absolute;
			right: 0;
			top: 0;
			width: 120rpx;
			height: 40rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			border-bottom-left-radius: 20rpx;

			&.status0 {
				background: $uni-primary-light;
				color: $uni-primary;
			}
			&.status1 {
				background: $uni-primary-light;
				color: $uni-primary;
			}
			&.status2 {
				background: $uni-info-light;
				color: $uni-info;
			}
		}
	}
}
</style>
